<!--
 * @Description: 测量输入
 * @Author: yech
 * @Date: 2021-09-08 
-->
<template>
    <el-dialog
        custom-class="measure-dialog"
        title="请输入测量值"
        v-model="dialogVisible"
        width="80%"
        :append-to-body="true"
    >
        <el-row v-if="currentEditMode === EditMode.Add" class="measure-type-row">
            <el-col :span="24">
                <el-radio v-model="measureType" size="medium" :label="MeasureType.Glucose">血糖</el-radio>
                <el-radio v-model="measureType" size="medium" :label="MeasureType.Weight">体重</el-radio>
            </el-col>
        </el-row>
        <el-row v-show="measureType === MeasureType.Glucose">
            <el-col :span="7"><span class="measure-label">血糖值</span></el-col>
            <el-col :span="17">
                <el-input-number
                    class="measure-value"
                    v-model="glucoseValue"
                    :precision="1"
                    :step="0.1"
                    :max="15"
                    :min="4"
                />
            </el-col>
        </el-row>
        <el-row v-show="measureType === MeasureType.Weight">
            <el-col :span="7"><span class="measure-label">体重值</span></el-col>
            <el-col :span="17">
                <el-input-number
                    class="measure-value"
                    v-model="weightValue"
                    :precision="1"
                    :step="0.1"
                    :max="200"
                    :min="60"
                />
            </el-col>
        </el-row>
        <div></div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="danger" @click="deleteClick" v-if="currentEditMode === EditMode.Edit">删 除</el-button>
                <el-button @click="cancelClick" v-if="currentEditMode === EditMode.Add">取 消</el-button>
                <el-button type="primary" @click="okClick">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { EditMode } from '@/utils/editMode';
import { MeasureType } from '@/utils/measureType';
import { MeasureHandlers } from '@/utils/useMonitor';
import { ElButton, ElDialog, ElInputNumber, ElRow, ElCol, ElRadio } from 'element-plus';
import { computed, defineProps, defineEmits, ref, defineExpose } from 'vue';

interface MeasureDialogProps {
    measureHandlers: MeasureHandlers;
    glucose: number;
    weight: number;
}
interface MeasureDialogEmits {
    (e: 'update:glucose', value: number): void;
    (e: 'update:weight', value: number): void;
}
const props = defineProps<MeasureDialogProps>();
const emit = defineEmits<MeasureDialogEmits>();
const glucoseValue = computed<number>({
    get: () => {
        return props.glucose;
    },
    set: (value) => {
        emit('update:glucose', value);
    }
});
const weightValue = computed<number>({
    get: () => {
        return props.weight;
    },
    set: (value) => {
        emit('update:weight', value);
    }
});

const dialogVisible = ref(false);
const measureDate = ref('');
const currentEditMode = ref(EditMode.Add);
const currentEditId = ref('');
const measureType = ref(MeasureType.Glucose);

const getMeasureValue = function (): number {
    if (measureType.value === MeasureType.Glucose) {
        return glucoseValue.value;
    }
    return weightValue.value;
};
const cancelClick = function () {
    dialogVisible.value = false;
};

const deleteClick = function () {
    dialogVisible.value = false;
    props.measureHandlers.remove(measureType.value, currentEditId.value);
};

const okClick = function () {
    dialogVisible.value = false;
    if (currentEditMode.value === EditMode.Add) {
        props.measureHandlers.add(measureType.value, getMeasureValue(), measureDate.value);
    } else {
        props.measureHandlers.modify(measureType.value, currentEditId.value, getMeasureValue());
    }
};

defineExpose({
    add: function (date: string) {
        measureType.value = MeasureType.Glucose;
        currentEditMode.value = EditMode.Add;
        measureDate.value = date;
        dialogVisible.value = true;
    },
    modify: function (type: MeasureType, id: string, value: number) {
        measureType.value = type;
        currentEditMode.value = EditMode.Edit;
        currentEditId.value = id;
        glucoseValue.value = value;
        dialogVisible.value = true;
    }
});
</script>
<style lang="scss">
.measure-type-row {
    margin-bottom: 10px;
}
.measure-label {
    font-size: 20px;
    vertical-align: middle;
    line-height: 40px;
}
.measure-value .el-input {
    font-size: 20px;
}
.measure-value .el-input-number {
    width: 150px;
}
.measure-dialog {
    .el-dialog__body {
        padding: 10px 20px;
    }
    .el-dialog__title {
        font-size: 22px;
    }
    .el-radio__label {
        font-size: 20px;
    }
}
</style>
